import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Form, Input } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { useDispatch } from 'react-redux';
import { GET_USER_INFO_ASYNC } from 'src/store/user/user.saga';
import loginCss from './css/login.module.scss';
import userService from '../../service/user/user.service';

export default function Login() {
  const dispatch = useDispatch();
  const [loginForm] = Form.useForm();
  const [form, setForm] = useState({
    userName: '',
    password: '',
  });
  const [errorMsg, setErrorMsg] = useState('');
  const navigate = useNavigate();

  function login() {
    setErrorMsg('');
    loginForm
      .validateFields()
      .then(() => {
        userService
          .login({
            username: form.userName,
            password: form.password,
          })
          .then(({ success, data, msg }) => {
            if (success) {
              dispatch({
                type: GET_USER_INFO_ASYNC,
              });
              navigate('/');
              localStorage.setItem('token', data.token);
            } else {
              setErrorMsg(msg || '登录失败');
            }
          });
      })
      .catch(() => {});
  }

  function valChange({ target }) {
    setForm({
      ...form,
      [target.dataset.name]: target.value,
    });
  }

  return (
    <div className={loginCss.wrap}>
      <div className={loginCss.formWrap}>
        <div className={loginCss.formHead}>
          <div className={loginCss.formHeadText}>{process.env.REACT_APP_PLATFORM_NAME}</div>
        </div>
        <Form form={loginForm} className={loginCss.formCntWrap}>
          <Form.Item
            className={loginCss.item}
            name="userName"
            label=""
            rules={[
              {
                required: true,
                message: '请输入账户名',
              },
              {
                max: 50,
                message: '账户名最大长度为50',
              },
            ]}
          >
            <Input
              data-name="userName"
              placeholder="请输入账户名"
              value={form.userName}
              suffix={<UserOutlined />}
              allowClear
              onChange={valChange}
            />
          </Form.Item>
          <Form.Item
            className={loginCss.item}
            name="password"
            label=""
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
              {
                max: 50,
                message: '密码最大长度为50',
              },
            ]}
          >
            <Input.Password
              data-name="password"
              placeholder="请输入密码"
              value={form.password}
              suffix={<UserOutlined />}
              allowClear
              onChange={valChange}
            />
          </Form.Item>
          {errorMsg && <div className={loginCss.error}>{errorMsg}</div>}
          <div className={loginCss.item}>
            <Button type="default" block onClick={login}>
              登录
            </Button>
          </div>
        </Form>
      </div>
    </div>
  );
}
